<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/js/jquery.cascade.1.1.1/jquery.cascade.js"></script>            
<script type="text/javascript" src="/js/jquery.cascade.1.1.1/jquery.cascade.ext.js"></script> 
<script type="text/javascript" src="/js/jquery.cascade.1.1.1/jquery.templating.js"></script> 
<script type="text/javascript">
			var list1 = [
				{'When':'1','Value':'11','Text':'A1dddd'},
				{'When':'1','Value':'12','Text':'A2wwww'},
				{'When':'1','Value':'13','Text':'A3aaaa'},
				{'When':'1','Value':'14','Text':'A4ddd'},
				{'When':'B','Value':'B1','Text':'B1gg'},
				{'When':'B','Value':'B2','Text':'B2ss'},
				{'When':'B','Value':'B3','Text':'B3aa'},
				{'When':'B','Value':'B4','Text':'B4'},
				{'When':'C','Value':'C1','Text':'C1'},
				{'When':'C','Value':'C2','Text':'C2'},
				{'When':'D','Value':'D1','Text':'D1'},
				{'When':'D','Value':'D2','Text':'D2'}
				];
			
			function commonTemplate(item) {
				return "<option value='" + item.Value + "'>" + item.Text + "</option>"; 
			};
			function commonTemplate2(item) {
				return "<option value='" + item.Value + "'>***" + item.Text + "***</option>"; 
			};
			
			function commonMatch(selectedValue) {
				return this.When == selectedValue; 
			};
			
		</script>
		
		<style type="text/css">
			.cascade-loading  	
			{																		
				background: transparent url("indicator.gif") no-repeat center; 					
			}
		</style>
	</head>
	<body>

		
	<h2>Simple</h2>
	<div>
		<label>Parent
			<select id="simple">
				<option value="1">A</option>
				<option value="B">B</option>
				<option value="C">C</option>
				<option value="D">D</option>
			</select>
		</label>
		<label>Child
			<select id="simple_child">
				<option value='nope1'>I am not deleted on ready()</option>
				<option value='nope2'>Neither Am I</option>
			</select>
		</label>
	</div>
	<script type="text/javascript">
		jQuery(document).ready(function()
		{	
			jQuery("#simple_child").cascade("#simple",{					
				list: list1,			
				template: commonTemplate,
				match: commonMatch 			
			});
		});
	</script>

</body>
</html>